<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="../../scripts/ace-template.js"></script>
		<title>ace template examples</title>
		
		<style type="text/css">
			#log{
				width: 600px;
				height: 400px;
			}
		</style>
	</head>
	<body>
		<textarea id="log"></textarea>
		<script id="t1" type="text/template">
			if (this["title"]) 
			{
				#{title}
			}
			else
			{
				<b>无</b>
			}
		</script>
		<script id="t2" type="text/template">
			<input type="text" value="#{helper.quot(title)}"/>
		</script>
		<script id="t3" type="text/template">
			<ul>
			for (var i = 0; i < this.length; i++) {
				<li>#{this[i]}</li>
			}
			</ul>
		</script>
		<script id="t4" type="text/template">
			N / A
			A, B, C
			12.34
		</script>
		
		<script id="t5" type="text/template">
			http://www.baidu.com
			mailto:xxx@baidu.com
			name:(#{name})
		</script>
		<script>
			(function() {
				var log = document.getElementById("log");
				var list = [
					{
						input: ["#{this}", "<b>b</b>"],
						output: "&lt;b&gt;b&lt;/b&gt;"
					},
					{
						input: ["!#{this}", "<b>b</b>"],
						output: "<b>b</b>"
					},
					{
						input: ["#{this}", 0],
						output: "0"
					},
					{
						input: ["#{this}", false],
						output: "false"
					},
					{
						input: ["#{title}#{size}", {
							title: "t"
						}],
						output: "t"
					},
					{
						input: ["#{this}", 0],
						output: "0"
					},
					{
						input: ["#{title}#{size + 2}", {
							title: "t"
						}],
						error: true
					},
					{
						input: ["#{1 + 2 + 3 + 4}"],
						output: "10"
					},
					{
						input: ["t1"],
						output: "				<b>无</b>\n"
					},
					{
						input: ["t2", {
							title: "hello world"
						}, {
							quot: function(text) {
								return "[" + text + "]";
							}
						}],
						output: '			<input type="text" value="[hello&nbsp;world]"/>'
					},
					{
						input: ["t3", [
							"a", "b", "c"
						]],
						output: "			<ul>\n				<li>a</li>\n				<li>b</li>\n				<li>c</li>\n			</ul>"
					},
					{
						input: ["t4", {}],
						output: "			N / A\n			A, B, C\n			12.34"
					},
					{
						input: ["t5", { name : 'yyy' }],
						output: "			http://www.baidu.com\n			mailto:xxx@baidu.com\n			name:(yyy)"
					},
					{
						input: ["#{title}\n<\script>String.prototype.trim = function() {}<\/script>\n#{value}<\style type=\"text/css\">body{background:none;}<\/style>", {
							title: 'script',
							value: 'style'
						}],
						output: "script\n<\script>String.prototype.trim = function() {}<\/script>\nstyle<\style type=\"text/css\">body{background:none;}<\/style>"
					}
				];
				
				var message = [];
				for (var i = 0; i < list.length; i++) {
					var item = list[i];
					try {
						var output = AceTemplate.format(item.input[0], item.input[1], item.input[2]);
						if (output == item.output) {
							message.push("√" + i + "输出结果符合预期。");
						} else {
							message.push("×" + i + "输出结果不符合预期。-- " + output);
						}
					} catch(ex) {
						if (item.error) {
							message.push("√" + i + "异常符合预期。");
						} else {
							message.push("×" + i + "异常不符合预期。-- " + ex.message);
						}
					}
				}
				log.value = message.join("\n");
			})();
		</script>
	</body>
</html>